<template>
  <div>
    <div class="content">
      <p>
        【{{
          subjectList.type == 1
            ? '单选'
            : subjectList.type == 2
            ? '多选'
            : '简答'
        }}】{{ subjectList.title }}
      </p>

      <van-tag
        class="tag"
        v-for="(item, index) in subjectList.tag"
        :key="index"
        >{{ item }}</van-tag
      >
    </div>
    <div class="choose" :disabled="isRight === null">
      <!-- 单选 -->
      <van-radio-group v-show="subjectList.type == 1" v-model="radio">
        <van-cell
          label-position="left"
          class="cell "
          :class="{
            checked: radio === tionitem && successResults.length === 0,
            success: success && successResults[0].includes(tionitem),
            error:
              error &&
              successResults[0].includes(radio) === false &&
              radio === tionitem
          }"
          :name="tionitem"
          icon-size="0px"
          v-for="(tionitem, tionindex) in options"
          :key="tionindex"
          @click="getRadio(tionitem)"
          ><div class="span">
            {{ tionitem }}.{{ subjectList.option[tionindex] }}
          </div>
          <template #right-icon>
            <van-radio :name="tionitem" />
          </template>

          <div class="righticon">
            <van-icon
              v-show="
                (isRight && radio === tionitem) ||
                  (success && successResults[0] === tionitem)
              "
              name="success"
            />
            <van-icon
              v-show="isRight === false && radio === tionitem"
              name="cross"
            />
          </div>
        </van-cell>
      </van-radio-group>
      <!-- 多选 -->
      <van-checkbox-group v-model="result" v-show="subjectList.type == 2">
        <van-cell-group>
          <van-cell
            class="cell"
            v-for="(tionitem, tionindex) in options"
            clickable
            :class="{
              checked: result.includes(tionitem) && successResults.length === 0,
              success: success && successResults.includes(tionitem),
              error:
                error &&
                successResults.includes(tionitem) === false &&
                result.includes(tionitem)
            }"
            :key="tionindex"
            @click="toggle(tionindex)"
            ><template #title>
              {{ tionitem }}.{{ subjectList.option[tionindex] }}
            </template>
            <template #right-icon>
              <van-checkbox :name="tionitem" ref="checkboxes" />
            </template>
            <div class="righticon">
              <van-icon
                v-show="success && successResults.includes(tionitem)"
                name="success"
              />
              <van-icon
                v-show="
                  error &&
                    successResults.includes(tionitem) === false &&
                    result.includes(tionitem)
                "
                name="cross"
              />
            </div>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>

      <!-- 简答 -->
      <van-field
        v-show="subjectList.type == 3"
        v-model="shortValue"
        class="short"
        type="textarea"
      />
    </div>
    <div class="bottom">
      <div class="left">
        <span :class="collect ? 'actived' : ''" @click="collectquertions">
          <i class="iconfont iconbtn_shoucang_nor"></i>
          <p>收藏</p>
        </span>
        <span @click="openText">
          <i class="iconfont iconbtn_shuati_fankui"></i>
          <p>反馈</p>
        </span>
      </div>
      <div class="quesnum">
        <span>{{ nowNum }}</span
        >/{{ ids.length }} 题
      </div>
      <div class="submit">
        <van-button
          class="sub"
          :class="successResults.length !== 0 ? 'next' : 'btns'"
          :disabled="disabled"
          @click="submit(subjectList.id)"
          >{{ successResults.length !== 0 ? '下一题' : '提交' }}</van-button
        >
      </div>
    </div>
    <div :style="(height = '10px')" />
    <!-- 答案解析 -->
    <analysis ref="analysis" :analysis="analysis" />
    <!-- 反馈 -->
    <van-popup
      :style="{ width: '80%', height: '45%' }"
      class="feedback"
      v-model="show"
    >
      <h6>意见反馈</h6>
      <van-field
        class="textarea"
        v-model="value"
        placeholder="请输入你对此问题的反馈意见"
        type="textarea"
      />
      <van-grid class="grid" :column-num="2">
        <van-grid-item text="取消" />
        <van-grid-item>
          <div
            class="none"
            :class="value.length === 0 ? 'submit' : ''"
            :disabled="value.length === 0"
            @click="subFeedback"
          >
            提交
          </div>
        </van-grid-item>
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
import bus from '../../../utils/bus.js'
import analysis from './analysis'
import { mapGetters, mapState } from 'vuex'
import {
  interviewQuestions,
  submitQuestion,
  collectQuestion
} from '@/api/api.js'
export default {
  components: {
    analysis
  },
  props: ['content', 'details'],
  watch: {
    details: function (newVlue, oldVlue) {
      if (newVlue) {
        this.subjectList = this.details

        console.log(this.details.id)
        if (this.accomplish.includes(this.details.id)) {
          this.$refs.analysis.show = false
          this.$nextTick(() => {
            this.submit(this.details.id)
            this.$refs.analysis.show = true
          })
        } else {
          this.radio = ''
          this.result = []
          this.analysis = {}
          this.success = false
          this.error = false
          this.isRight = null
          this.successResults = []
          this.$refs.analysis.show = false
          this.isSubmit = true
        }

        this.getAll()
        // console.log('答题卡', this.nowNum)
      } else {
        // console.log('本身')
      }
      // 答题卡跳转渲染
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    }),
    ...mapGetters(['collectQuestions'])
  },

  data () {
    return {
      value: '',
      shortValue: '',
      show: false,
      disabled: true,
      collect: false,
      radio: '',
      result: [],
      subjectList: [],
      ids: [],
      nowNum: '',
      collectList: [],
      options: ['A', 'B', 'C', 'D'],
      // 正确答案
      success: false,
      // 我选的答案/错误答案
      error: false,
      // 答案解析
      analysis: {},
      accomplish: [],
      successResults: [],
      isRight: null,
      isSubmit: true
      // details: []
    }
  },
  async created () {
    const res = await interviewQuestions(this.content)
    // console.log(this.subjectList)
    if (this.details.length !== 0) {
      this.subjectList = this.details
      // console.log(this.subjectList)
    } else {
      // 渲染
      this.subjectList = res.data[0].detail
      this.$set(this.subjectList, 'id', res.data[0].id)
      console.log(this.subjectList)
    }
    this.$nextTick(() => {
      this.ids = res.data.map(item => {
        return item.id
      })
      bus.$emit('getids', this.ids)
      bus.$emit('idsget', this.ids)
      this.getAll()
    })
  },

  methods: {
    openText () {
      this.show = true
    },
    // 提交反馈
    subFeedback () {
      this.show = false
      this.value = ''
      this.$toast('反馈成功')
    },
    // 收藏
    async collectquertions () {
      const res = await collectQuestion({ id: this.subjectList.id })
      this.collect = !this.collect
      this.userInfo.collectQuestions = res.data
      if (this.collect && res) {
        this.$toast.success('收藏成功')
      } else {
        this.$toast.fail('取消收藏')
      }
      // console.log(this.userInfo)
    },
    // 多选事件
    toggle (index) {
      if (this.isSubmit) {
        this.$refs.checkboxes[index].toggle()
        this.disabled = false
      }
    },
    // 单选
    getRadio (tionitem) {
      if (this.isSubmit) {
        this.radio = tionitem
        this.disabled = false
      }
    },
    // 提交答案
    async submit (id) {
      if (this.successResults.length === 0) {
        // 简答题
        if (this.shortValue !== '') {
          this.disabled = false
        }
        // 提交
        const res = await submitQuestion({
          id: id,
          singleAnswer: this.radio,
          multipleAnswer: this.result
        })
        // console.log(res)
        this.accomplish.push(id)
        this.analysis = res.data
        this.$refs.analysis.show = true
        // 传递Id作为标识
        bus.$emit('getid', id)

        this.isRight = res.data.isRight
        // 提交状态
        bus.$emit('isRight', this.isRight)
        if (res.data.singleAnswer) {
          this.successResults[0] = res.data.singleAnswer
        } else if (res.data.multipleAnswer) {
          this.successResults = res.data.multipleAnswer
        }
        this.success = true
        this.error = true
        this.isSubmit = false
      } else {
        console.log(this.ids[this.nowNum])
        this.$emit('getQuestion', this.ids[this.nowNum])
        this.disabled = true
      }
    },

    // 渲染封装
    getAll () {
      // 渲染题数量
      this.nowNum = this.ids.indexOf(this.subjectList.id) + 1
      // 同步数量
      bus.$emit('getNum', this.nowNum)
      // console.log(this.nowNum, this.ids[0])
      this.$nextTick(() => {
        // this.$emit('getids', this.ids)
        // console.log(this.ids)
      })
      // 渲染收藏
      if (this.userInfo.collectQuestions.includes(this.subjectList.id)) {
        this.collect = true
        // console.log('已经收藏')
      } else {
        this.collect = false
        // console.log('没有')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  font-size: 16px;
  padding: 20px 10px 0 10px;
  .tag {
    background-color: #f7f4f5;
    color: #b4b4bd;
    padding: 4px;
    margin-right: 7px;
  }
  p {
    text-align: justify;
  }
}
.choose {
  margin-top: 20px;
  margin-bottom: 100px;
  .cell {
    padding: 10px;
    margin: 10px auto;
    font-size: 16px;
    width: 90%;
    border-radius: 4px;

    position: relative;
  }

  .short {
    background-color: #ccc;
    width: 90%;
    margin: 0 auto;
    height: 300px;
  }
  .span {
    width: 90%;
  }
}
.bottom {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  .left {
    span {
      float: left;
      font-size: 12px;
      text-align: center;
      margin: 0 10px 20px;
      color: #babac2;
      p {
        margin-top: 0px;
      }
      i {
        font-size: 28px;
      }
    }
  }
  .quesnum {
    flex: 1;
    padding-left: 50px;
    font-size: 20px;
    line-height: 60px;
    span {
      color: #d12d3e;
    }
  }
  .submit {
    margin-left: 50px;

    .sub {
      padding: 0 30px;
      color: #fff;
      border-radius: 5px;
    }
    .btns {
      background-color: #ee0a24;
    }
    .next {
      background-color: #1989fa;
    }
  }
}
.feedback {
  text-align: center;
  border-radius: 10px;
  h6 {
    margin: 10px;
    font-size: 22px;
  }
  .textarea {
    width: 90%;
    height: 50%;
    margin: 20px auto 40px;
    background-color: #f7f4f5;
  }
  .none {
    font-size: 18px;
  }
  .submit {
    color: #b9b9c1;
  }
}
/deep/.van-grid-item__text {
  font-size: 18px;
}
/deep/.van-cell {
  font-size: 16px;
}
/deep/.van-radio__icon .van-icon {
  color: #fff;
}
/deep/.van-radio__icon,
/deep/.van-checkbox__icon {
  display: none;
}
</style>
<style lang="less">
.checked {
  border: 1px solid rgb(73, 73, 73);
}
.righticon {
  font-size: 20px;
  z-index: 2;
  position: absolute;
  right: 0px;
  top: 30%;
}
.success {
  background-color: #ddfad9;
  color: #1dc779;
  div {
    color: #1dc779;
  }
}
.error {
  i {
    color: #ff4949;
  }

  background-color: #ffefea;
}
</style>
